<template>
    <div
        class="switch"
        :style="{ width: size, height: (+size.replace('px', '') / 2) + 'px', borderRadius: (+size.replace('px', '') / 4) + 'px', backgroundColor: modelValue ?  activeColor :inactiveColor}"
        @click="toggleSwitch"
    >
        <div
            class="switch__thumb"            
            :style="{ width: thumbSize, top: ((+size.replace('px', '') / 4) - (+thumbSize.replace('px', '') / 2))+'px', left: ((+size.replace('px', '') / 4) - (+thumbSize.replace('px', '') / 2))+'px', height: thumbSize,backgroundColor: modelValue ?  activeThumbColor : inactiveThumbColor, transform: modelValue ? 'translateX(' +  (+size.replace('px', '') / 2)  + 'px)' : 'translateX(0)' }"
        >            
            <div class="switch_icon">
                <svg-icon v-if="modelValue" :name="activeIcon" :style="{width: (+thumbSize.replace('px', '') )+'px', height: (+thumbSize.replace('px', ''))+'px'}"></svg-icon>
                <svg-icon v-else :name="inactiveIcon" :style="{width: (+thumbSize.replace('px', '') )+'px', height: (+thumbSize.replace('px', ''))+'px'}"></svg-icon>
            </div>            
        </div>
    </div>
</template>

<script setup lang="ts">
    import SvgIcon from '@/components/SvgIcon/index.vue';    

    const props = defineProps(
        {
            size: {
                type: String,
                default: '60px',
            },
            thumbSize: {
                type: String,
                default: '26px',
            },
            activeColor: {
                type: String,
                default: '#00c853',
            },
            inactiveColor: {
                type: String,
                default: '#dcdcdc',
            },
            activeThumbColor: {
                type: String,
                default: 'white',
            },
            inactiveThumbColor: {
                type: String,
                default: 'white',
            },
            activeIcon: {
                type: String,
                default: '',
            },
            inactiveIcon: {
                type: String,
                default: '',
            },
            modelValue:{
                type: Boolean,
                default: false,
            }
        }
    )

    const $emit = defineEmits(['update:modelValue','change'])

    const toggleSwitch = () => {
        $emit('update:modelValue', !props.modelValue);
        $emit('change',!props.modelValue);
    };

</script>

<style  scoped lang="scss">
    .switch {        
        position: relative;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }


    .switch__thumb {        
        border-radius: 50%;
        position: absolute;
        transition: transform 0.3s ease;        
    }
    .switch_icon{
        /*居中*/
        display: flex;
        justify-content: center;/*垂直居中*/
        align-items: center;/*水平居中*/
    }

</style>
